<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import myAxios from '../../../plugins/myAxios'

// 筛选条件
const filterForm = ref({
  subjectId: '',
  chapterId: '',
  studentId: ''
})

// 数据列表
const recordList = ref([])

// 下拉选项数据
const subjectOptions = ref([])
const chapterOptions = ref([])
const studentOptions = ref([])

// 添加新的响应式变量
const correctionDialog = ref(false)
const currentRecord = ref(null)

// 获取科目列表
const getSubjects = async () => {
  try {
    const data = await myAxios.get('/teacher/researchInfo/subject/list')
    subjectOptions.value = data
  } catch (error) {
    ElMessage.error('获取科目列表失败')
  }
}

// 获取章节列表
const getChapters = async (subjectId) => {
  try {
    if (!subjectId) {
      chapterOptions.value = []
      return
    }
    const data = await myAxios.get(`/teacher/researchInfo/chapter/getBySubject/${subjectId}`)
    chapterOptions.value = data
    // 切换科目时清空已选章节
    filterForm.value.chapterId = ''
  } catch (error) {
    ElMessage.error('获取章节列表失败')
  }
}

// 获取学生列表
const getStudents = async () => {
  try {
    const data = await myAxios.get('/teacher/student/listAll')
    studentOptions.value = data
  } catch (error) {
    ElMessage.error('获取学生列表失败')
  }
}

// 获取答题记录列表
const getRecordList = async () => {
  try {
    if (!filterForm.value.studentId) {
      ElMessage.warning('请先选择学生')
      return
    }
    const params = {
      subjectId: filterForm.value.subjectId,
      chapterId: filterForm.value.chapterId,
      studentId: filterForm.value.studentId
    }
    const data = await myAxios.get('/teacher/answer/record/list', { params })
    recordList.value = data
  } catch (error) {
    ElMessage.error('获取答题记录失败')
  }
}

// 修改批改方法
const handleCorrection = (record) => {
  currentRecord.value = record
  correctionDialog.value = true
}

const submitCorrection = async (isCorrect) => {
  try {
    await myAxios.post('/teacher/answer/record/correct', {
      recordId: currentRecord.value.id,
      isCorrect: isCorrect
    })
    ElMessage.success('批改成功')
    correctionDialog.value = false
    await getRecordList()
  } catch (error) {
    ElMessage.error('批改失败')
  }
}

onMounted(() => {
  getSubjects()
  getStudents() // 添加获取学生列表
})
</script>

<template>
  <div class="answer-record-container">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-form :model="filterForm" inline>
        <el-form-item label="科目" style="width: 180px;">
          <el-select
            v-model="filterForm.subjectId"
            @change="getChapters"
            placeholder="请选择科目">
            <el-option
              v-for="item in subjectOptions"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="章节" style="width: 180px;">
          <el-select
            v-model="filterForm.chapterId"
            placeholder="请选择章节">
            <el-option
              v-for="item in chapterOptions"
              :key="item.id"
              :label="item.chapterName"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="学生" style="width: 180px;">
          <el-select
            v-model="filterForm.studentId"
            placeholder="请选择学生">
            <el-option
              v-for="item in studentOptions"
              :key="item.id"
              :label="item.studentNumber"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRecordList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表区域 -->
    <div class="record-list">
      <el-table :data="recordList">
        <el-table-column 
          prop="question.content" 
          label="题目内容" 
          min-width="250"
          show-overflow-tooltip>
          <template #default="{ row }">
            <div class="question-content">{{ row.question.content }}</div>
          </template>
        </el-table-column>
        <el-table-column label="选项" min-width="200">
          <template #default="{ row }">
            <div class="option-list">
              <div class="option-item">
                <span class="option-label">A</span>
                <span class="option-content">{{ row.question.optionA }}</span>
              </div>
              <div class="option-item">
                <span class="option-label">B</span>
                <span class="option-content">{{ row.question.optionB }}</span>
              </div>
              <div class="option-item">
                <span class="option-label">C</span>
                <span class="option-content">{{ row.question.optionC }}</span>
              </div>
              <div class="option-item">
                <span class="option-label">D</span>
                <span class="option-content">{{ row.question.optionD }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="question.answer" label="正确答案" />
        <el-table-column prop="answerContent" label="学生答案" />
        <el-table-column prop="answerTime" label="答题时间" />
        <el-table-column prop="isCorrect" label="批改状态">
          <template #default="{ row }">
            <el-tag :type="row.isCorrect === null ? 'info' : (row.isCorrect ? 'success' : 'danger')">
              {{ row.isCorrect === null ? '未批改' : (row.isCorrect ? '正确' : '错误') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              :disabled="row.isCorrect !== null"
              @click="handleCorrection(row)">
              {{ row.isCorrect === null ? '批改' : '已批改' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 在原有模板最后添加对话框 -->
    <el-dialog
      v-model="correctionDialog"
      title="批改答题"
      width="30%">
      <div class="correction-content">
        <p>请选择批改结果：</p>
        <div class="correction-buttons">
          <el-button type="success" @click="submitCorrection(true)">正确</el-button>
          <el-button type="danger" @click="submitCorrection(false)">错误</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.answer-record-container {
  padding: 20px;

  .filter-section {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
  }

  .record-list {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
  }
}

.correction-content {
  text-align: center;
  .correction-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
  }
}

.option-list {
  .option-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }

    .option-label {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background-color: #f2f6fc;
      border-radius: 4px;
      margin-right: 8px;
      font-weight: bold;
      color: #409eff;
    }

    .option-content {
      flex: 1;
      line-height: 24px;
    }
  }
}

.question-content {
  line-height: 1.5;
  word-break: break-all;
}
</style>
